<template>
	<view class="container">
		<!-- 页面标题 -->
		<view class="page-title">长者			长者长者健康数据采集
		</view>
		
		<!-- 数据采集表单容器 -->
		<view class="form-container">
			<!-- 第一行：选择采集长者（使用wd-picker） -->
			<wd-picker
				label="选择采集长者"
				placeholder="请选择长者"
				:label-width="'180rpx'"
				prop="elderId"
				v-model="selectedElderId"
				:columns="elderColumns"
				@change="onElderChange"
				class="form-row row1"
			/>
			
			<!-- 第二行：选择采集类型（使用wd-picker） -->
			<wd-picker
				label="采集类型"
				placeholder="请选择采集类型"
				:label-width="'180rpx'"
				prop="type"
				v-model="selectedTypeId"
				:columns="collectionTypeColumns"
				:disabled="!selectedElderId"
				@change="onTypeChange"
				class="form-row row2"
			/>
			
			<!-- 动态表单：选择类型后显示 -->
			<view class="dynamic-form" v-if="showForm">
				<!-- 血压表单 -->
				<view v-if="selectedTypeId === 'bloodPressure'">
					<view class="form-field">
						<view class="field-label">收缩压 (mmHg)：</view>
						<wd-input 
							type="number" 
							placeholder="请输入收缩压" 
							v-model="formData.systolic"
							class="field-input"
						/>
					</view>
					<view class="form-field">
						<view class="field-label">舒张压 (mmHg)：</view>
						<wd-input 
							type="number" 
							placeholder="请输入舒张压" 
							v-model="formData.diastolic"
							class="field-input"
						/>
					</view>
				</view>
				
				<!-- 血糖表单 -->
				<view v-if="selectedTypeId === 'bloodSugar'">
					<view class="form-field">
						<view class="field-label">血糖值 (mmol/L)：</view>
						<wd-input 
							type="number" 
							placeholder="请输入血糖值" 
							v-model="formData.glucose"
							class="field-input"
							step="0.1"
						/>
					</view>
					<view class="form-field">
						<view class="field-label">测量时间：</view>
						<wd-radio-group v-model="formData.measureTime" class="radio-group">
							<view class="radio-option">
								<wd-radio value="空腹" color="#007aff"></wd-radio>
								<text>空腹</text>
							</view>
							<view class="radio-option">
								<wd-radio value="餐后" color="#007aff"></wd-radio>
								<text>餐后</text>
							</view>
							<view class="radio-option">
								<wd-radio value="随机" color="#007aff"></wd-radio>
								<text>随机</text>
							</view>
						</wd-radio-group>
					</view>
				</view>
				
				<!-- 体温表单 -->
				<view v-if="selectedTypeId === 'temperature'">
					<view class="form-field">
						<view class="field-label">体温 (°C)：</view>
						<wd-input 
							type="number" 
							placeholder="请输入体温" 
							v-model="formData.temperature"
							class="field-input"
							step="0.1"
						/>
					</view>
					<view class="form-field">
						<view class="field-label">测量部位：</view>
						<wd-radio-group v-model="formData.measurePart" class="radio-group">
							<view class="radio-option">
								<wd-radio value="额温" color="#007aff"></wd-radio>
								<text>额温</text>
							</view>
							<view class="radio-option">
								<wd-radio value="腋温" color="#007aff"></wd-radio>
								<text>腋温</text>
							</view>
							<view class="radio-option">
								<wd-radio value="口温" color="#007aff"></wd-radio>
								<text>口温</text>
							</view>
						</wd-radio-group>
					</view>
				</view>
				
				<!-- 通用备注和提交 -->
				<view class="form-field">
					<view class="field-label">备注：</view>
					<wd-textarea 
						placeholder="请输入备注信息" 
						v-model="formData.notes"
						class="field-textarea"
						:rows="3"
					></wd-textarea>
				</view>
				
				<view class="form-actions">
					<wd-button 
						class="submit-btn" 
						@click="submitForm"
						:disabled="!selectedElderId || !selectedTypeId"
						type="primary"
					>
						提交数据
					</wd-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue';

// 长者数据（适配wd-picker的columns格式）
const elderColumns = ref([
  { label: '张三', value: '1', age: 78, phone: '13800138000' },
  { label: '李四', value: '2', age: 65, phone: '13900139000' },
  { label: '王五', value: '3', age: 82, phone: '13700137000' },
  { label: '赵六', value: '4', age: 72, phone: '13600136000' }
]);

// 采集类型（适配wd-picker的columns格式）
const collectionTypeColumns = ref([
  { label: '血压', value: 'bloodPressure' },
  { label: '血糖', value: 'bloodSugar' },
  { label: '体温', value: 'temperature' }
]);

// 选中状态
const selectedElderId = ref('');
const selectedTypeId = ref('');

// 表单数据
const formData = ref({
  systolic: '',
  diastolic: '',
  glucose: '',
  temperature: '',
  measureTime: '空腹',
  measurePart: '额温',
  notes: ''
});

// 获取选中的长者名称
const getElderName = (id) => {
  const elder = elderColumns.value.find(item => item.value === id);
  return elder ? elder.label : '';
};

// 获取选中的类型名称
const getTypeName = (id) => {
  const type = collectionTypeColumns.value.find(item => item.value === id);
  return type ? type.label : '';
};

// 判断是否显示表单
const showForm = computed(() => {
  return selectedElderId.value && selectedTypeId.value;
});

// 处理长者选择变化
const onElderChange = () => {
  // 重置表单
  resetForm();
};

// 处理采集类型变化
const onTypeChange = () => {
  // 清空当前类型无关数据
  const type = selectedTypeId.value;
  if (type !== 'bloodPressure') {
    formData.value.systolic = '';
    formData.value.diastolic = '';
  }
  if (type !== 'bloodSugar') {
    formData.value.glucose = '';
  }
  if (type !== 'temperature') {
    formData.value.temperature = '';
  }
};

// 重置表单
const resetForm = () => {
  selectedTypeId.value = '';
  formData.value = {
    systolic: '',
    diastolic: '',
    glucose: '',
    temperature: '',
    measureTime: '空腹',
    measurePart: '额温',
    notes: ''
  };
};

// 提交表单
const submitForm = () => {
  if (!selectedElderId.value || !selectedTypeId.value) return;
  
  const type = selectedTypeId.value;
  const data = formData.value;
  
  // 简单验证
  if (type === 'bloodPressure' && (!data.systolic || !data.diastolic)) {
    WdToast.show({ title: '请填写完整血压数据', icon: 'none' });
    return;
  }
  
  if ((type === 'bloodSugar' && !data.glucose) || 
      (type === 'temperature' && !data.temperature)) {
    WdToast.show({ title: '请填写测量值', icon: 'none' });
    return;
  }
  
  // 构造提交数据
  const submitData = {
    elderId: selectedElderId.value,
    elderName: getElderName(selectedElderId.value),
    type: getTypeName(selectedTypeId.value),
    time: new Date().toLocaleString(),
    ...data
  };
  
  // 模拟提交
  console.log('提交数据:', submitData);
  WdToast.success('数据提交成功');
  
  // 重置表单
  resetForm();
};
</script>

<style scoped>
/* 保持与原生版本完全一致的样式 */
.container {
	background-color: #f5f5f7;
	min-height: 100vh;
	padding: 20rpx;
}

.page-title {
	font-size: 34rpx;
	font-weight: bold;
	color: #333;
	text-align: center;
	margin: 20rpx 0 30rpx;
	padding-bottom: 20rpx;
	border-bottom: 1px solid #eee;
}

.form-container {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

/* 适配wd-picker的表单行样式 */
.form-row {
	padding: 18rpx 0;
}

.row1 {
	border-bottom: 1px solid #f0f0f0;
}

/* 覆盖wd-picker默认样式，保持原设计 */
::v-deep .wd-picker {
	/* 保持标签宽度 */
	--wd-picker-label-width: 180rpx;
}

::v-deep .wd-picker__control {
	/* 保持选择框样式 */
	border: 1px solid #ddd;
	border-radius: 8rpx;
	background-color: #f9f9f9;
	padding: 14rpx 18rpx;
}

.dynamic-form {
	margin-top: 24rpx;
	padding-top: 24rpx;
	border-top: 1px dashed #eee;
}

.form-field {
	display: flex;
	align-items: flex-start;
	margin-bottom: 22rpx;
}

.field-label {
	font-size: 26rpx;
	color: #333;
	width: 180rpx;
	padding-top: 16rpx;
}

.field-input {
	flex: 1;
	font-size: 26rpx;
	padding: 14rpx 18rpx;
	border: 1px solid #ddd;
	border-radius: 8rpx;
}

.field-textarea {
	flex: 1;
	font-size: 26rpx;
	padding: 14rpx 18rpx;
	border: 1px solid #ddd;
	border-radius: 8rpx;
	min-height: 120rpx;
}

.radio-group {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 30rpx;
	padding-top: 14rpx;
}

.radio-option {
	display: flex;
	align-items: center;
	gap: 8rpx;
	font-size: 26rpx;
}

.form-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 10rpx;
}

.submit-btn {
	background-color: #007aff !important;
	color: #fff !important;
	font-size: 28rpx;
	padding: 14rpx 36rpx;
	border-radius: 8rpx;
}

.submit-btn:disabled {
	background-color: #ccc !important;
	color: #999 !important;
}
</style>
